隨著內容越來越多，結構更加複雜，是時候來整理一下關於字型的配置，這次我們來新增一個 _typography.sass 的 partial，並且利用 extends 的方式來套用這些字型配置

Typography

首先新增檔案 _typography.sass，並且將重複用到的字型內容配置好，如常常用到的 link font style，以及 logo 的樣式

// _typography.sass

%link-font
    letter-spacing: 0.1em
    font-size: $menu-item-font-size
    font-weight: 900

%logo-font
    font-size: 100px
    font-weight: 100
    font-family: $logo-font

之後在 main.sass 中新增 import

// main.sass

@import "variable"
@import "basic"
@import "typography"
@import "header"
@import "dropdown"

而之前有使用到的相關 class 進行替換，例如 _header.sass 中的字型以及 logo 的部分

// _header.sass

.header
    box-shadow: -2px 2px 5px #0000001a
    border-top: 12px solid $primary-color
    @extend %link-font

    //...

    .logo
        @extend %logo-font

之後如果有新的字型設定，就統一在 typography 設置，之後在使用 extand 來使用

這樣一來就完成 typography 的配置了~~~

Hover

除了 typography 之外，我們再來將 label 的 hover 做 extend 的處理，因為他也經常被重複使用到

這次我們將他加入在 basic 中，因為他算是全域的被使用到，而且內容也還沒多到能獨立拆分為 sass 檔案

// _basic.sass

%hover-style
    color: $secondary-color
    cursor: pointer

接著在會使用到的地方加上 extend

// _modal.sass

.modal-button:hover
    @extend %hover-style

還有之前 dropdown 使用到的 label 也是

// _dropdown.sass

.dropdown
    position: relative
    display: inline-block

    // ...

    &-label:hover
        @extend %hover-style

    // ...

這樣就完成設定了！

以上～大家明天見～～

除此之外，也歡迎大家走走逛逛關於我們團隊夥伴的文章

lu23770127 - SASS 基礎初學三十天

10u1 - 糟了！是世界奇觀！

juck30808 - Python - 數位行銷分析與 Youtube API 教學

HLD - 淺談物件導向與Design Pattern介紹

SiQing47 - 前端？後端？你早晚都要全端的，何不從現在開始？